<template>
	<view>
		<view class="header">
			<view class="header_image">
				<view class="header_text">新型冠状病毒肺炎实时辟谣</view>
				<view class="search_box"><u-search placeholder="请输入关键词" :show-action="false" shape="round" :clearabled="true" @change="searchRumour()" v-model="search"></u-search></view>
				<view class="tips"><u-notice-bar mode="horizontal" :list="tips" color="#fff" type="none" volume-size="30"></u-notice-bar></view>
			</view>
		</view>
		
		<view class="content" v-if="!search">
			<view class="content_box" v-for="item in this.newList" :key="item.id">
				<view class="content_topBox">
					<view class="content">
						<view class="title"><u-link :href="item.url" style="color:#000000">{{item.title}}</u-link></view>
						<view class="title_tip">{{item.explain}}</view>
					</view>
					<view class="author" v-if="item.author">来源：{{item.author}}</view>
				</view>
				<view class="title_image"><image :src="item.imgsrc" mode=""></image></view>
			</view>
		</view>
		<view class="content" v-if="search">
			<view class="content_box" v-for="item in this.searchList" :key="item.id">
				<view class="content_topBox">
					<view class="content">
						<view class="title"><u-link :href="item.url" style="color:#000000">{{item.title}}</u-link></view>
						<view class="title_tip">{{item.explain}}</view>
					</view>
					<view class="author" v-if="item.author">来源：{{item.author}}</view>
				</view>
				<view class="title_image"><image :src="item.imgsrc" mode=""></image></view>
			</view>
		</view>
		<view class="none">
			<u-divider>没有更多了</u-divider>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search:'',
				tips:['请勿乱传播谣言，散布谣言要承担法律责任！'],
				newList:[],
				searchList:[],
				imgSrc:''
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			searchRumour(){
				this.searchList=[];
				for(var i=0;i<this.newList.length;i++){
					if(this.newList[i].title.search(this.search)>=0){	
						this.searchList.push(this.newList[i]);
					}
					
				}
				
			},
			getList(){
				uni.request({
					url:'https://api.yonyoucloud.com/apis/dst/ncov/identifyRumor',
					header:{
						'appplication':'apicode',
						'apicode':'57c3e979b3a94ffdbaa748757020e9fb'
					}
				}).then(res=>{
					this.newList=res[1].data.newslist;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.none{
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.content_box{
		width: 100%;
		height: 168rpx;
		padding: 20rpx;
		border: 2rpx solid #ccc;
		display: flex;
		justify-content: space-between;
		.content_topBox{
			width:80%;
			display: flex;
			flex-wrap: wrap;
			.content{
				width: 100%;
				display: flex;
				flex-wrap: nowrap;
				
			}
			.author{
				font-size: 24rpx;
				color:#b1b1b1;
				
			}
		}
		.title{
			width: 80%;
			font-weight: 600;
		}
		.title_tip{
			width: 20%;
			background-color: #c41f20;
			border-radius: 4rpx;
			width: 56rpx;
			height: 40rpx;
			color:#fff;
			font-size: 28rpx;
			text-align: center;
		}
		.title_image{
			width: 200rpx;
			height: 120rpx;
			image{
				width: 100%;
				height: 100%;
			}
			
		}
	}
	.search_box{
		margin-left: 50rpx;
		margin-top: 20rpx;
		.u-search{
			width:650rpx;
		}
	}
	
.header{
	width: 100%;
	height: 364rpx;
	.header_image{
		background: url(https://mat1.gtimg.com/www/coral/jiaozhen/imgs/feiyan_banner.png) top;
		background-size: cover;
		width: 100%;
		height: 364rpx;
		.tips{
			margin-left: 40rpx;
			margin-top: 20rpx;
			width: 90%;
		}
	}
	.header_text{
			font-size:40rpx;
			padding-top: 58rpx;
		    text-align: center;
		    color: #FFFFFF;
		    letter-spacing: 0;
		    
	}
}
</style>